{% extends "base.html" %}
{% block title %}环境管理{% endblock %}
{% load staticfiles %}
{% block content %}
    <div class="am-modal am-modal-prompt" tabindex="-1" id="add_env_model">
        <div class="am-modal-dialog">
            <div style="font-size: medium;" class="am-modal-hd">HttpRunnerManager</div>
            <div class="am-modal-bd">
                <form class="form-horizontal" id="add_env">
                    <div class="form-group">
                        <label class="control-label col-sm-3" for="mode"
                               style="font-weight: inherit; font-size: small " hidden="">mode：</label>
                        <div class="col-sm-9">
                            <input name="index" type="text" class="form-control" id="mode" value="add" hidden="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-3" for="env_name"
                               style="font-weight: inherit; font-size: small ">环境名称：</label>
                        <div class="col-sm-9">
                            <input name="env_name" type="text" class="form-control" id="env_name"
                                   placeholder="测试环境" value="">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-sm-3" for="base_url"
                               style="font-weight: inherit; font-size: small ">请求地址：</label>
                        <div class="col-sm-9">
                            <input name="base_url" type="text" class="form-control" id="base_url"
                                   placeholder="127.0.0.1:8000" value="">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-sm-3" for="simple_desc"
                               style="font-weight: inherit; font-size: small ">简要描述：</label>
                        <div class="col-sm-9">
                            <input name="simple_desc" type="text" id="simple_desc" class="form-control"
                                   placeholder="简要描述" value="">
                        </div>
                    </div>
                </form>
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                <span class="am-modal-btn" data-am-modal-confirm>提交</span>
            </div>
        </div>
    </div>

    <div class="am-modal am-modal-confirm" tabindex="-1" id="my-invalid">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">HttpRunnerManager</div>
            <div class="am-modal-bd">
                亲，确定删除该环境配置么？
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                <span class="am-modal-btn" data-am-modal-confirm>确定</span>
            </div>
        </div>
    </div>

    <div class="admin-biaogelist">
        <div class="listbiaoti am-cf">
            <ul class="am-icon-flag on"> 环境管理</ul>
            <dl class="am-icon-home" style="float: right;"> 当前位置： 系统设置 > <a href="#">环境管理</a></dl>
            <dl>
                <button type="button" id="add_env_button" class="am-btn am-btn-danger am-round am-btn-xs am-icon-plus">
                    添加环境
                </button>
            </dl>
        </div>
        <form class="am-form am-g">
            <table width="100%" class="am-table am-table-bordered am-table-radius am-table-striped">
                <thead>
                <tr class="am-success">
                    <th class="table-check"><input type="checkbox" id="select_all"/></th>
                    <th class="table-title">序号</th>
                    <th class="table-type">环境名称</th>
                    <th class="table-type">Host_Port</th>
                    <th class="table-title">简要描述</th>
                    <th class="table-date am-hide-sm-only">创建时间</th>
                    <th width="163px" class="table-set">操作</th>
                </tr>
                </thead>
                <tbody>

                {% for foo in env %}
                    <tr>
                        <td><input type="checkbox" name="env_{{ foo.id }}" value="{{ foo.id }}"/></td>
                        <td>{{ forloop.counter }}</td>
                        <td><a href="#"
                               onclick="edit('{{ foo.id }}', '{{ foo.env_name }}', '{{ foo.base_url }}', '{{ foo.simple_desc }}')">{{ foo.env_name }}</a>
                        </td>
                        <td>{{ foo.base_url }}</td>
                        <td>{{ foo.simple_desc }}</td>
                        <td class="am-hide-sm-only">{{ foo.create_time }}</td>
                        <td>
                            <div class="am-btn-toolbar">
                                <div class="am-btn-group am-btn-group-xs">
                                    <button type="button"
                                            class="am-btn am-btn-default am-btn-xs am-text-secondary am-round"
                                            data-am-popover="{content: '编辑', trigger: 'hover focus'}"
                                            onclick="edit('{{ foo.id }}', '{{ foo.env_name }}', '{{ foo.base_url }}', '{{ foo.simple_desc }}')"> <span
                                            class="am-icon-pencil-square-o"></span></button>
                                    <button type="button"
                                            class="am-btn am-btn-default am-btn-xs am-text-danger am-round"
                                            data-am-popover="{content: '删除', trigger: 'hover focus'}"
                                            onclick="del('{{ foo.id }}')"><span
                                            class="am-icon-trash-o"></span></button>
                                </div>
                            </div>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            <ul class="am-pagination am-fr">
                {{ page_list }}
            </ul>
            <hr/>
        </form>
    </div>

    <script type="text/javascript">
        $('#add_env_button').on('click', function () {
            $('#add_env_model').modal({
                relatedTarget: this,
                onConfirm: function () {
                    info_ajax('#add_env', '/api/env_set/')
                },
                onCancel: function () {
                }
            });
        });

        function edit(id, env_name, base_url, simple_desc) {
            $('#mode').val(id);
            $('#env_name').val(env_name);
            $('#base_url').val(base_url);
            $('#simple_desc').val(simple_desc);
            $('#add_env_model').modal({
                relatedTarget: this,
                onConfirm: function () {
                    update_data_ajax('#add_env', '/api/env_set/')
                },
                onCancel: function () {
                }
            });

        }

        function del(id) {
            $('#my-invalid').modal({
                relatedTarget: this,
                onConfirm: function () {
                    del_data_ajax(id, '/api/env_set/')
                },
                onCancel: function () {
                }
            });
        }

        $('#select_all').click(function () {
            var isChecked = $(this).prop("checked");
            $("input[name^='env']").prop("checked", isChecked);
        })

    </script>

{% endblock %}